<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 控制台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/dashboard.css" rel="stylesheet">
    <style>
    .charts-grid {
        display: flex;
        gap: 20px; /* 让两个图表有间距 */
        justify-content: space-between; /* 让它们分布均匀 */
    }

    .chart-card {
        flex: 1; /* 让两个卡片等宽 */
        max-width: 50%; /* 限制最大宽度，防止变得过大 */
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .chart-container {
        width: 100%;
        height: 400px; /* 保证高度一致 */
    }
</style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li class="active">
                    <a href="#">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
{#                <li>#}
{#                    <a href="/applicant/sim_interview">#}
{#                        <i class='bx bx-video'></i>#}
{#                        <span>模拟面试</span>#}
{#                    </a>#}
{#                </li>#}
                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/dashboard" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="false" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
{#                <li>#}
{#                    <a href="/applicant/reports">#}
{#                        <i class='bx bx-line-chart'></i>#}
{#                        <span>面试报告</span>#}
{#                    </a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="/applicant/interview_manage">#}
{#                        <i class='bx bx-line-chart'></i>#}
{#                        <span>面试管理</span>#}
{#                    </a>#}
{#                </li>#}



                <li>
                    <a href="/applicant/personal_center">
                        <i class='bx bx-user'></i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 在sidebar后面添加 -->
        <div class="sidebar-overlay"></div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">
                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/img.png') }}" alt="用户头像" class="avatar">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                            {{ full_name }}
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="profile.html">个人设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="dashboard-content">
                <!-- 数据概览 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class='bx bx-time-five'></i>
                        </div>
                        <div class="stat-info">
                            <h3>12</h3>
                            <p>面试次数</p>
                        </div>
                        <div class="stat-chart">
                            <div class="progress-ring">
                                <svg>
                                    <circle class="progress-ring-circle" cx="30" cy="30" r="28"></circle>
                                </svg>
                                <span>75%</span>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class='bx bx-trending-up'></i>
                        </div>
                        <div class="stat-info">
                            <h3>85</h3>
                            <p>平均分数</p>
                        </div>
                        <div class="stat-trend positive">
                            <i class='bx bx-up-arrow-alt'></i>
                            <span>5%</span>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class='bx bx-badge-check'></i>
                        </div>
                        <div class="stat-info">
                            <h3>8</h3>
                            <p>完成任务</p>
                        </div>
                        <div class="stat-progress">
                            <div class="progress">
                                <div class="progress-bar" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                            <!-- 图表区域 -->
                                <div class="charts-grid">
                <!-- 面试得分趋势 -->
                <div class="chart-card">
                    <div class="card-header">
                        <h5>面试得分趋势</h5>
                        <div class="card-actions">
                            <button class="btn btn-icon">
                                <i class='bx bx-dots-vertical-rounded'></i>
                            </button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <div id="scoreChart" style="width:100%; height: 400px;"></div>
                    </div>
                </div>

                <!-- 技能评估 -->
                <div class="chart-card">
                    <div class="card-header">
                        <h5>最近一次技能评估</h5>
                        <div class="card-actions">
                            <button class="btn btn-icon">
                                <i class='bx bx-dots-vertical-rounded'></i>
                            </button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <div id="skillChart" style="width:100%; height: 400px;"></div>
                    </div>
                </div>
            </div>

                <!-- 最近面试 -->
                <div class="recent-interviews">
                    <div class="section-header">
                        <h5>最近面试</h5>
                        <a href="/applicant/interview_manage" class="btn-link">查看全部</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>职位</th>
                                    <th>时间</th>
                                    <th>得分</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="interviewTableBody">
                                <!-- 面试数据将通过AJAX动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="/static/js/candidate/dashboard.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取面试列表
        fetch('/api/get_application')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const interviewTableBody = document.querySelector('#interviewTableBody');
                    data.recent_interviews.forEach(interview => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${interview.job_title}</td>
                            <td>${new Date(interview.apply_time).toLocaleDateString()}</td>
                            <td>
                                ${interview.status in ['已投递', '已查看', '面试中'] ? `
                                    <div class="score">
                                        <span class="score-value">暂无</span>
                                        <div class="score-bar" style="--score-width: 0%"></div>
                                    </div>
                                ` : `
                                    <div class="score">
                                        <span class="score-value">${interview.ai_evaluation_score}</span>
                                        <div class="score-bar" style="--score-width: ${interview.ai_evaluation_score}%"></div>
                                    </div>
                                `}
                            </td>
                            <td><span class="status ${interview.status}">${interview.status}</span></td>
                            <td>
                                ${interview.status == '已查看' ? `
                                    <a href="#" class="btn btn-outline-primary">催确认</a>
                                ` : interview.status == '面试中' ? `
                                    <a href="#" class="btn btn-outline-primary join-interview" data-app-id="${interview.application_id}">参加面试</a>
                                ` : ''}
                            </td>
                        `;
                        interviewTableBody.appendChild(row);
                    });

                    // 动态生成的元素需要重新绑定事件
                    bindJoinInterviewEvents();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error fetching interview data:', error);
                alert('获取面试数据失败');
            });
    });

    function bindJoinInterviewEvents() {
        document.querySelectorAll('.join-interview').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止默认行为
                console.log('Button clicked:', this); // 调试信息
                const appId = this.getAttribute('data-app-id').trim();
                console.log('App ID:', appId);

                // 发送GET请求将 application_id 传递到后端
                fetch(`/api/applicant/interview-room?application_id=${appId}`, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Server response:', data); // 调试信息
                    if (data.success) {
                        // 重定向到 interview-room.html
                        window.location.href = `/applicant/TestConfig`;
                    } else {
                        alert('进入面试房间失败');
                    }
                })
                .catch(error => {
                    console.error('Error joining interview room:', error);
                    alert('进入面试房间失败');
                });
            });
        });
    }

    // 初始绑定事件
    bindJoinInterviewEvents();
</script>
<script>
    // 渲染 面试得分趋势 (折线图)
    var scoreDom = document.getElementById('scoreChart');
    var scoreChart = echarts.init(scoreDom);

     fetch('/api/score_trend')
        .then(response => response.json())
        .then(data => {

    scoreOption = {
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 1,
        lt: 3,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 5,
        lt: 7,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: data
    }
  ]
};



    scoreChart.setOption(scoreOption);
        });




    // 渲染 技能评估 (嵌套饼图)
    var skillDom = document.getElementById('skillChart');
    var skillChart = echarts.init(skillDom);

    fetch('/api/latest-scores')
        .then(response => response.json())
        .then(data => {
            skillOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: [
                '技术', '经验', '教育', '潜力',
                '技术能力', '学习能力', '团队合作', '问题解决', '沟通交流'
            ]
        },
        series: [
            {
                name: '技能评估',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 14
                },
                labelLine: { show: false },
                data: [
                    { value: data['potential_match'], name: '潜力', selected: true },
                    { value: data['education_match'], name: '教育' },
                    { value: data['experience_match'], name: '经验' },
                    { value: data['tech_match'], name: '技术' }
                ]
            },
            {
                name: '技能评估',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: { length: 30 },
                label: {
                    formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: [
                    { value: data['technical_ability'], name: '技术能力' },
                    { value: data['learning_ability'], name: '学习能力' },
                    { value: data['team_collaboration'], name: '团队合作' },
                    { value: data['problem_solving'], name: '问题解决' },
                    { value: data['communication_expression'], name: '沟通交流' }
                ]
            }
        ]
    };

    skillChart.setOption(skillOption);
        });


</script>

</body>
</html>